<template>
    <div>
        <van-nav-bar title="注册" style="background-color: #FFD85F;" class="headera" />

        <div class="register-page">
            <div class="register-container">
                <van-image class="register-logo"
                    src="http://localhost:8081/wx/storage/fetch/275481e6-cb81-47aa-b0bf-320b06ca1b07.png" width="150"
                    height="100" round />

                <h2 class="register-title">注册新用户</h2>

                <van-field v-model="registerForm.username" placeholder="请输入用户名" left-icon="user-o" clearable
                    :label-width="0" />
                <van-field v-model="registerForm.email" placeholder="请输入邮箱" left-icon="envelop-o" type="email" clearable
                    :label-width="0" />
                <van-field v-model="registerForm.password" placeholder="请输入6位数密码" left-icon="user-circle-o"
                    type="password" clearable :label-width="0" />

                <van-button class="register-button" type="primary" block round @click="handleRegister">注册</van-button>

                <div class="register-footer">
                    <span class="register-link" @click="goToLogin">已有账号？去登录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { NavBar, Image, Field, Button, Toast } from 'vant';

export default {
    components: {
        [NavBar.name]: NavBar,
        [Image.name]: Image,
        [Field.name]: Field,
        [Button.name]: Button,
    },
    data() {
        return {
            registerForm: {
                username: '',
                email: '',
                password: '',
            },
        };
    },
    methods: {
        validateEmail(email) {
            const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return regex.test(email);
        },
        async handleRegister() {
            const { username, email, password } = this.registerForm;

            if (!username) {
                Toast('用户名不能为空');
                return;
            }
            if (!email || !this.validateEmail(email)) {
                Toast('请输入有效的邮箱地址');
                return;
            }
            if (!password || password.length !== 6) {
                Toast('密码格式有误，请输入6位数密码');
                return;
            }

            try {
                const response = await axios.post("http://localhost:8081/wx/admin/register", {
                    username,
                    password,
                    email,
                });

                console.log(response)
                if (response.data.errno === 0) {
                    Toast.success("注册成功");
                    setTimeout(() => {
                        this.$router.push({ name: "login" });
                    }, 1000);
                } else {
                    Toast.fail(response.data.message || "注册失败");
                }
            } catch (error) {
                console.error("注册失败:", error);
                Toast.fail("网络错误，请稍后再试");
            }
        },
        goToLogin() {
            this.$router.push({ name: "login" });
        },

    },
};
</script>

<style scoped>
/* 输入框立体样式和间距 */
.van-field {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background-color: #fff;
}

/* 输入内容区域：垂直居中，字体统一 */
::v-deep(.van-field__control) {
    padding: 14px 0;
    font-size: 16px;
}

/* 图标垂直居中对齐，保持美观 */
::v-deep(.van-field__left-icon) {
    display: flex;
    align-items: center;
    height: auto;
    font-size: 18px;
    padding-left: 4px;
    margin-right: 8px;
    color: #666;
}

.register-page {
    background-color: #FFF7E1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.register-container {
    background: #FFD85F;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    margin-top: 50px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.register-logo {
    margin-bottom: 20px;
}

.register-title {
    font-size: 1.5em;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.register-button {

    font-weight: bold;
    margin-top: 20px;
}

.register-footer {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    font-size: 0.85em;
    color: #555;
}

.register-link {
    cursor: pointer;
    color: #333;
    text-decoration: underline;
}
</style>